<div class="content">
    <div id="example_title">
        <h1>Base UI Class</h1>
        All classes in w2ui are extended from w2base class that provides basic event functionality. It has such methods as
        <ul style="font-family: monoko, monospace">
            <li><b>on</b>(event, func)</li>
            <li><b>off</b>(event)</li>
            <li><b>trigger</b>(event, details)</li>
        </ul>
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="main" style="width: 100%; height: 100px;"></div>

<!--CODE-->
<script type="module">
import { w2ui, w2base, query } from '__W2UI_PATH__'

class Control extends w2base {
    constructor(conf) {
        // custom code
        super(conf.name)
    }

    render(box) {
        let edata = this.trigger('render', { box })
        if (edata.cancelled) {
            return
        }
        this.box = box
        query(box).html('<div style="background-color: lightgreen; width: 200px; border-radius: 3px; padding: 10px;">my component</div>')
        // event's on complete loop
        edata.finish()
    }
}
if (w2ui.some) {
    delete w2ui.some
}
let myControl = new Control({ name: 'some' })
myControl.render(query('#main'))
</script>